<template>
	<div class="box">
		<!-- 搜索组件 -->
		<el-form
			:inline="true"
			:model="listQuery"
			class="demo-form-inline"
			size="medium"
		>
			<el-form-item>
				<el-select
					@change="handleTimeDisable"
					@clear="handleTimeDisable"
					placeholder="全部"
					size="medium"
					v-model="queryTime.type"
				>
					<el-option
						:key="index"
						:label="item.label"
						:value="item.value"
						v-for="(item, index) in searchBarData.timeTypeList"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker
					:disabled="timeDisabled"
					@change="getTimeVal"
					@focus="hasTimeType"
					end-placeholder="结束日期"
					range-separator="至"
					size="medium"
					start-placeholder="开始日期"
					type="daterange"
					v-model="queryTime.value"
					value-format="yyyy-MM-dd"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-select
					@change="get_custom_type"
					placeholder="全部"
					v-model="queryObj.type"
				>
					<el-option
						:key="index"
						:label="item.label"
						:value="item.value"
						v-for="(item, index) in searchBarData.customQueryList"
					></el-option>
				</el-select>
				<el-input
					autofocus
					class="no-border"
					clearable
					placeholder="请输入内容"
					v-model="listQuery.custom_query_value"
				></el-input>
			</el-form-item>
			<el-form-item class="ml40">
				<el-button @click="handleRefresh" class="btn_bg" type="primary"
					>查询</el-button
				>
				<el-button @click="handleReset">重置</el-button>
			</el-form-item>
			<el-form-item class="position_right_20">
				<el-button @click="handleTask($event)" class="btns" type="primary"
					>优先采集</el-button
				>
				<el-button @click="handleTask($event)" class="btns">任务重置</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<span class="title">筛选条件:</span>
			<el-tag
				:disable-transitions="false"
				:key="tag.name"
				@close="handleClose(tag)"
				closable
				v-for="tag in allCheckList"
				>{{ tag.name }}</el-tag
			>
			<span class="show_hide" @clik="clearChecked">清空筛选</span>
			<span
				@click="handleShow($event)"
				class="show_hide"
				data-show="show"
				v-if="isOpen === true"
			>
				展开筛选
				<i class="el-icon-arrow-down"></i>
			</span>
			<span
				@click="handleShow($event)"
				class="show_hide"
				data-show="hide"
				v-if="isClose === true"
			>
				收起筛选
				<i class="el-icon-arrow-up"></i>
			</span>
		</el-row>
		<section v-if="isShow">
			<!-- 去掉
			<el-row>
				<span class="title">就诊类型:</span>
				<template>
					<el-checkbox-group v-model="vistCheckedList" size="medium">
						<el-checkbox-button v-for="(item, index) in vistTypes" :label="item.name" :key="index"
							@change="getCheckVal($event, item)">
							{{
							item.name
							}}
						</el-checkbox-button>
					</el-checkbox-group>
				</template>
			</el-row>
      -->

			<el-row>
				<span class="title">任务状态:</span>
				<el-radio-group size="mini" v-model="taskStatus">
					<el-radio
						:key="index"
						:label="item.name"
						@change="getTaskStatus($event, item)"
						border
						v-for="(item, index) in taskList.taskStatusList"
						>{{ item.name }}</el-radio
					>
				</el-radio-group>
			</el-row>
			<el-row>
				<span class="title">任务类型:</span>
				<el-radio-group size="mini" v-model="taskType">
					<el-radio
						:key="index"
						:label="item.name"
						@change="getTaskType($event, item)"
						border
						v-for="(item, index) in taskList.taskTypeList"
						>{{ item.name }}</el-radio
					>
				</el-radio-group>
			</el-row>
			<el-row>
				<span class="title">检查科室:</span>
				<el-checkbox-group size="mini" v-model="vistCheckedList">
					<el-checkbox
						:key="index"
						:label="item.name"
						@change="getCheckVal($event, item)"
						border
						v-for="(item, index) in departmengData"
						>{{ item.name }}</el-checkbox
					>
				</el-checkbox-group>
			</el-row>

			<el-row>
				<span class="title">检查类型:</span>
				<el-checkbox-group size="mini" v-model="vistCheckedList">
					<el-checkbox
						:key="index"
						:label="item.name"
						@change="getCheckVal($event, item)"
						border
						v-for="(item, index) in checkTypes"
						>{{ item.name }}</el-checkbox
					>
				</el-checkbox-group>
			</el-row>
		</section>
	</div>
</template>

<script>
import { taskRetry, taskPriority } from '@/api/task-mg'
import { getDicDefineList } from 'api/other'
import mapGetters from 'vuex'
export default {
	name: 'search-bar',
	components: {},
	props: {
		searchBarData: {
			type: Object,
			required: false,
			default: {
				timeTypeList: [
					{ label: '不限', value: 0 },
					{ label: '检查时间', value: 1 },
					{ label: '报告时间', value: 2 },
					{ label: '审核时间', value: 3 },
					{ label: '归档时间', value: 4 },
					{ label: '创建时间', value: 5 }
				],
				customQueryList: [
					{ label: '患者姓名', value: 0 },
					{ label: '病历号', value: 1 },
					{ label: '检查号', value: 2 },
					{ label: '身份证号', value: 3 },
					{ label: '患者编号', value: 4 },
					{ label: '门诊号', value: 5 }
				]
			}
		},
		taskData: {
			type: Array
		}
	},
	computed: {
		// ...mapGetters( [ 'org_msg' ] )
	},
	data () {
		return {
			queryTime: {
				type: this.searchBarData.timeTypeList[ 0 ].value,
				value: null
			},
			queryObj: {
				type: this.searchBarData.customQueryList[ 0 ].value,
				value: null
			},
			type: null,
			task_type: null,
			isShow: false,
			isOpen: true,
			isClose: false,
			// 以下参数后台动态返回
			vistTypes: [
				{
					name: '不限',
					type: 0
				},
				{
					name: '门诊',
					type: 1
				},
				{
					name: '住院',
					type: 2
				},

				{
					name: '急诊',
					type: 3
				},
				{
					name: '其他',
					type: 4
				}
			],
			// 检查类型
			checkTypes: [
				{
					name: '不限',
					type: 0
				},
				{
					name: 'CR',
					type: 8
				},
				{
					name: 'DR',
					type: 1
				},
				{
					name: 'DX',
					type: 2
				},
				{
					name: 'XA',
					type: 3
				},
				{
					name: 'RF',
					type: 5
				},
				{
					name: 'CT',
					type: 6
				},
				{
					name: 'MR',
					type: 7
				}
			],
			departmengData: [
				{
					name: '不限',
					type: 0
				},
				{
					name: '超声科',
					type: 1
				},
				{
					name: '内镜科',
					type: 2
				},
				{
					name: '检验科',
					type: 3
				},
				{
					name: '核医学科',
					type: 4
				},
				{
					name: '心电科',
					type: 4
				},
				{
					name: '特检科',
					type: 4
				},
				{
					name: '病理科',
					type: 4
				},
				{
					name: '其他科室',
					type: 4
				}
			],
			vistCheckedList: [], // 筛选条件集合
			checkList: [], // 筛选条件集合
			checkBox: [], // 选择的
			timeVal: [],
			allCheckList: [],
			timeVal: [],
			listQuery: {
				time_type: null,
				start_time: null,
				end_time: null,
				custom_query_type: null,
				custom_query_value: null,
				depart_code: null,
				exam_type: null
			},
			val: null,
			taskType: null,
			taskStatus: null,
			timeDisabled: false,
			timeObj: {}, // 时间类型
			taskList: {
				taskStatusList: [
					{ type: null, name: '不限' },
					{ type: 0, name: '待执行' },
					{ type: 1, name: '执行中' },
					{ type: -1, name: '执行失败' },
					{ type: 3, name: '执行成功' }
				],
				taskTypeList: [
					{ type: null, name: '不限' },
					{ type: 0, name: '图文报告采集' },
					{ type: 1, name: '影像下载' },
					{ type: 2, name: '影像上传' },
					{ type: 3, name: '胶片采集' }
				]
			}
		}
	},
	mounted () {
		this.handleTimeDisable()
		this.get_custom_type()
	},
	methods: {
		handleRefresh () {
			// 查询
			console.log( this.listQuery )
			this.$emit( 'refreshSearch', this.listQuery )
		},
		handleReset () {
			//todo  重置表单
			this.queryTime = {
				type: this.searchBarData.timeTypeList[ 0 ].value,
				value: null
			}
			this.queryObj = {
				type: this.searchBarData.customQueryList[ 0 ].value,
				value: null
			}
			this.listQuery = {
				patient_name: null
			}
			// 重置
			for ( const key in this.listQuery ) {
				delete this.listQuery[ key ]
			}
			this.$emit( 'refreshSearch', {
				pagesize: 10,
				pageindex: 1
			} )
			this.handleRefresh()
		},
		getDicDefineList () {
			// 获取科室列表 对应的检查项
			// 清空
		},
		getIptData () {
			if ( this.queryObj.type ) {
				let temp = {}
				let key = this.queryObj.type,
					val = this.queryObj.value,
					obj = {}
				obj[ key ] = val
				temp = Object.assign( this.listQuery, obj )
				this.$emit( 'refreshSearch', temp )
			}
		},
		getCheckVal ( $event, item ) {
			const tempArr = []
			if ( $event === true ) {
				// todo 去重
				tempArr.push( item )
				console.log( tempArr )
				console.log( this.allCheckList )
				this.allCheckList = this.allCheckList.concat( tempArr )
				// 选中
			} else {
				// 取消选择
				this.allCheckList.filter( ele => {
					console.log( ele )
					return ele.name != item.name
				} )
			}
			console.log( this.allCheckList )
			// this.checkBox.push(item)
		},
		getTaskStatus ( $event, item ) {
			// 获取任务状态
			console.log( item )
			this.allCheckList.push( item )
		},
		getTaskType ( $event, item ) {
			// 获取任务类型
		},
		handleClose ( tag ) {
			// 关闭标签
			this.allCheckList.splice( this.allCheckList.indexOf( tag ), 1 )
		},
		handleShow ( $event ) {
			// 是否展开筛选
			console.log( $event )
			const isShow = $event.target.getAttribute( 'data-show' )
			if ( isShow === 'show' ) {
				this.isShow = true
				this.isOpen = false
				this.isClose = true
			} else {
				this.isShow = false
				this.isOpen = true
				this.isClose = false
			}
		},
		handleTimeDisable ( val ) {
			if ( this.queryTime.type ) {
				this.listQuery.time_type = this.queryTime.type
			} else {
				this.timeDisabled = true
			}
			// 时间清空 -- 后续处理
			this.queryTime.value = []
		},
		getTimeVal () {
			try {
				if ( this.queryTime.value.length > 0 ) {
					// 时间赋值
					this.listQuery.start_time = this.queryTime.value[ 0 ]
					this.listQuery.end_time = this.queryTime.value[ 1 ]
				}
			} catch {
				console.log( 'error' )
			}
		},
		hasTimeType () {
			if ( this.queryTime.type ) {
				console.log( this.query )
			} else {
				this.$message.warning( '请选择时间类型' )
			}
		},
		get_custom_type () {
			this.listQuery.custom_query_type = this.queryObj.type
		},
		handleTask ( $event ) {
			// 优先采集重试
			let params = { ids: [] }
			if ( this.taskData.length > 0 ) {
				// TOdo 参数传递
				params.ids = this.taskData
				console.log( params )
				if ( $event.target.innerText === '优先采集' ) {
					// 优先采集
					taskPriority( params ).then( res => {
						if ( res.code === 0 ) {
							// this.$message.success( '操作成功' )
							this.$parent.getList()
						} else {
							this.$message.fail( res.msg )
						}
					} )
				} else {
					// 任务重试
					taskRetry( params ).then( res => {
						// 任务重试
						if ( res.code === 0 ) {
							// this.$message.success( '操作成功' )
							this.$parent.getList()
						} else {
							this.$message.fail( res.msg )
						}
					} )
				}
			} else {
				this.$message.warning( '请选择操作项' )
			}
		},
		clearChecked () {
			// 清空筛选
			console.log( '清空' )
			this.allCheckList = []
			// 页面重置
		}
	}
}
</script>

<style  lang="less" scoped>
.box {
	font-size: 14px;
	.el-checkbox-group {
		display: inline-block;
	}
	.title {
		margin-right: 1.5vw;
		font-size: 14px;
	}
	.close {
		color: #3399ff;
	}
	.el-row {
		margin-top: 5px;
	}
	.el-checkbox-button {
		margin-right: 1.5vw;
	}
	.el-checkbox-button__inner {
		vertical-align: none;
		border: none !important;
	}
	.el-tag + .el-tag {
		margin-left: 10px;
	}
	.el-col-4 {
		text-align: right;
	}
	.el-select /deep/ .el-input {
		display: block;
		width: 110px;
	}
	.el-input--medium /deep/ .el-input__inner {
		width: 17.18vw;
	}

	.el-input {
		width: 16vw;
	}
}
.el-button {
	// width: 80px !important;
}
.el-input__inner {
	border-radius: 0;
}
.no-border {
	border-left: 0;
}
.show_hide {
	cursor: pointer;
	color: #3399ff;
	font-size: 14px;
}
.el-checkbox.is-bordered.el-checkbox--mini /deep/ .el-checkbox__inner {
	display: none;
}
.el-radio /deep/ .el-radio__input {
	display: none;
}
.btns {
	background: #fff;
	color: #0a70b0;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
}
.btns-last {
	color: #ff6f6f;
}
</style>
